<template>
  <div class="for">
    <div class="box">
      <!-- top -->
      <div class="top">
        <i class="iconfont icon-yinhao"></i>
        <p class="ptop">人生第一次买专辑</p>
        <p class="pbtm">——by_不舍爱与自由</p>
      </div>
      <!-- 图片 歌曲 价钱 -->
      <dl>
        <dt>
          <img
            src="https://img2.baidu.com/it/u=735370705,3952949346&fm=26&fmt=auto"
          />
        </dt>
        <dd>
          <p>幼鸟指南-毛不易</p>
          <p class="red">￥20</p>
        </dd>
      </dl>
    </div>
    <div class="box">
      <!-- top -->
      <div class="top">
        <i class="iconfont icon-yinhao"></i>
        <p class="ptop">人生第一次买专辑</p>
        <p class="pbtm">——by_不舍爱与自由</p>
      </div>
      <!-- 图片 歌曲 价钱 -->
      <dl>
        <dt>
          <img
            src="https://img2.baidu.com/it/u=735370705,3952949346&fm=26&fmt=auto"
          />
        </dt>
        <dd>
          <p>幼鸟指南-毛不易</p>
          <p class="red">￥20</p>
        </dd>
      </dl>
    </div>
    <div class="box">
      <!-- top -->
      <div class="top">
        <i class="iconfont icon-yinhao"></i>
        <p class="ptop">人生第一次买专辑</p>
        <p class="pbtm">——by_不舍爱与自由</p>
      </div>
      <!-- 图片 歌曲 价钱 -->
      <dl>
        <dt>
          <img
            src="https://img2.baidu.com/it/u=735370705,3952949346&fm=26&fmt=auto"
          />
        </dt>
        <dd>
          <p>幼鸟指南-毛不易</p>
          <p class="red">￥20</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  height: 5.5rem;
}
.for {
  display: flex;
  overflow: auto;
}
.red {
  color: red;
}

dd {
  line-height: 0.5rem;
}
.ptop {
  margin-top: 0.2rem;
}
.pbtm {
  margin-top: 2rem;
  margin-left: 1.3rem;
}
dl {
  display: flex;
}
img {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.12rem;
  margin-left: 0.2rem;
}
.icon-yinhao {
  font-size: 0.4rem;
  color: #ccc;
}
.top {
  width: 4rem;
  height: 4rem;
  /* background-color: brown; */
  box-shadow: 0px 0px 10px -5px;
  padding: 0.3rem;
  margin-top: 0.2rem;
  margin-left: 0.2rem;
}
dl {
  width: 4rem;
  height: 1.05rem;
  margin-top: 0.05rem;
  box-shadow: 0px 0px 10px -5px;
  margin-left: 0.2rem;
  /* background-color: burlywood; */
}
</style>